<template>
    <view class="container">
        <view class="group_item" style="height: 120upx;font-size: 35upx;">
            <view style="width: 100%;margin-top: 30upx">
            <uni-steps  :options="[{title: '身份认证'}, {title: '人脸认证'}, {title: '认证完成'}]" :active="0" active-color="#1DA3EE"></uni-steps>
            </view>
        </view>
        <view class="group_item" style="height: 120upx;font-size: 40upx;">
           <a style="margin-top: 30upx">身份认证</a>
        </view>
        <view class="group_item" style="height: 50upx">
            <a style="color: grey;font-size: 24upx;margin-top: 10upx">仅用于公安网核实，保证信息安全</a>
        </view>
        <view class="group_item">
            <input type="text" v-model="egressRecord.name" placeholder="请输入姓名" class="picker_class" />
        </view>
        <view class="group_item">
            <input type="text" v-model="egressRecord.sex" placeholder="请输入身份证" class="picker_class" />
        </view >
        <view class="group_item" style="height: 300upx">
            <view class="groupzm">
                <view class="group1">
                </view>
                <view class="group2">
                    <view style="display: flex">
                    <view style="margin-left: 20upx">点击上传</view>
                    <view style="color:#1DA3EE;margin-left: 15upx;flex-direction: row">人像面</view>
                    </view>
                </view>
            </view>
            <view class="groupfm">
                <view class="group1"></view>
                <view class="group2">
                    <view style="display: flex">
                        <view style="margin-left: 20upx">点击上传</view>
                        <view style="color:#1DA3EE;margin-left: 15upx;flex-direction: row">国徽面</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="group_item" style="height: 230upx;">
            <view style="width: 100%">
             <view style="font-size: 32upx">认证须知</view>
                <view style="height: 240upx;display: flex;">
                    <view class="rz">
                        <view class="rz1">
                        </view>
                        <view style="display: flex;">
                            <view style="flex-direction: row;margin-top: 3upx">
                            <icon type="success_no_circle" style="color: red;" size="12"/>
                            </view>
                            <view style="flex-direction: row;">
                            标准状况
                            </view>
                        </view>
                    </view>
                    <view class="rz">
                        <view class="rz2">
                        </view>
                        <view style="display: flex;">
                            <view style="flex-direction: row;margin-top: 3upx">
                                <icon type="cancel" style="color: red;" size="12"/>
                            </view>
                            <view style="flex-direction: row;">
                                拍摄不全
                            </view>
                        </view>
                    </view>
                    <view class="rz">
                        <view class="rz3">
                        </view>
                        <view style="display: flex;">
                            <view style="flex-direction: row;margin-top: 3upx">
                                <icon type="cancel" style="color: red;" size="12"/>
                            </view>
                            <view style="flex-direction: row;">
                                拍摄模糊
                            </view>
                        </view>
                    </view>
                    <view class="rz">
                        <view class="rz4">
                        </view>
                        <view style="display: flex;">
                            <view style="flex-direction: row;margin-top: 3upx">
                                <icon type="cancel" style="color: red;" size="12"/>
                            </view>
                            <view style="flex-direction: row;">
                                闪光过度
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="group_item">
            <view class="button_title">
                <button type="primary" class="button_class" @click="navTo('/package_biz/pages/declare/declareIndex')">取消</button>
            </view>
            <view class="button_title">
                <button type="primary" class="button_class" @click="navTo('/package_biz/pages/declare/verification/complete')">下一步</button>
            </view>
        </view>
   </view>
</template>

<script>
    import wPicker from "@/components/w-picker/w-picker.vue";
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                egressRecord:{
                    name: '',//姓名
                    sex:'',//性别
                },
                      uploadUrl: this.$api.request.apiBaseUrl + 'checkImg/WXImgSecCheck',
            }
        },
        onLoad() {

        },
        methods: {
            navTo(url){
                console.log(url)
                uni.redirectTo({
                    url:url
                })
            },
            addRegistration() {

            },
            radioChange(e){
                this.egressRecord.resourceType = e.detail.value
            },
            showTarget(){
                this.$refs['targetRegion'].show();
            },
            confirmTarget(e){
                this.egressRecord.inputTarget = e.result
            },
            showDateTime(){
                this.$refs['dateTime'].show();
            },
            confirmDate(e){
                this.egressRecord.inputTime = e.result
            }
        },
        components: {
            wPicker
        }
    }
</script>

<style scoped>
    .container {
        width: 100%;
        background-color: #FBFBFB;
        overflow: hidden;
    }
    .rz1{
        height: 120upx;
        background-image: url("/static/Mask1.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .rz2{
        height: 120upx;
        background-image: url("/static/Mask2.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .rz3{
        height: 120upx;
        background-image: url("/static/Mask3.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .rz4{
        height: 120upx;
        background-image: url("/static/Mask4.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .groupzm{
        width: 35%;
        margin-left: 70upx;
        margin-top: 20upx;
        height: 200upx;
        background-color: #FBFBFB;
        background-image: url("/static/zm.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .groupfm{
        width: 35%;
        margin-left: 70upx;
        margin-top: 20upx;
        height: 200upx;
        background-color: #FBFBFB;
        background-image: url("/static/fm.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .rz{
        flex-direction: row;
        width: 20%;
        margin-left: 4%;
        margin-top: 2%;
    }
    .group1{
        flex-direction: column;
        height: 200upx;
        background-image: url("/static/subtract.png");
        background-size:100% 100%;
        -moz-background-size:100% 100%;
    }
    .group2{
        flex-direction: column;
        margin-top: 25upx;
        color: gray;
    }
    .group_item {
        width: 100%;
        padding: 0upx 20upx;
        margin: 10upx 0;
        display: flex;
        flex-direction: row;
        background-color: white;
    }
    .picker_class {
        width: 100%;
        height: 100upx;
        line-height: 100upx;
        margin-left: 30upx;
        font-size: 28upx;
        padding-left: 10upx;
    }
    input {
        padding-left: 10upx;
    }

    .button_class {
        bottom: 40upx;
        margin-top: 20upx;
        width: 80%;
        margin-left: 10%;
        height: 80upx;
        line-height: 80upx;
        border-radius: 40upx;
        background-color: #1DA3EE !important;
        color: white
    }
    .button_title{
        width: 50%;
        padding-top: 60upx;
        /* height: 100upx; */
        /* line-height: 100upx; */
        font-size: 30upx;
        font-weight: bold;
    }
</style>
